<template>
    <p>这是一个全局组件</p>
    <p>name : {{ name }}</p>
    <p>obj: {{ obj }}</p>
    <p>obj.name: {{ obj.name }}</p>
    <P>arr: {{ arr }}</P>
    <P>arr[0]: {{ arr[0] }}</P>
    <ul>
        <li v-for="(item, index) in arr">{{ item }}</li>
    </ul>

    <h2>computed</h2>
    <p>a: {{ a }}</p>
    <p>AAA: {{ AAA }}</p>

    <button @click="addOne()">加1</button>
    <button @click="addTwo()">加2</button>
    <h2>watch</h2>
    <!-- <sonDome foot="hello world!" :age=a/> -->
    <sonDome></sonDome>
</template>

<script setup>


import { ref, reactive, computed, watch } from 'vue'
//引入子组件
// import sonDome from './sonDome.vue'

const name = ref('Tom')
const a = ref(0)
const obj = reactive({
    name: '王老板',
    age: 46
})
const arr = reactive([
    'A', 'B', 'C', 'D', 'E'
])

const AAA = computed(() => {
    return a.value + 10
})
//
function addOne() {
    a.value++
}
const addTwo = () => {
    a.value = a.value + 2
}
//
watch(a, (New, Ole) => {
    console.log('New', New);
    console.log('Ole', Ole);
})

</script>